body {
    --list-item-transition: 0.2s ease; /* transition for list items */
    --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */
}

@property --animations {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--animations: on) {
    .visual-refresh {
        /* list hover animations */
        .wrapper__2ea32 .link__2ea32 /* channels */,
        .container__91a9d /* members */,
        .channel__972a0 /* dms */,
        .side_aa8da2 .item_aa8da2 /* settings */ {
            transition: margin-left var(--list-item-transition);
            will-change: margin-left;
        }
        .wrapper__2ea32:hover .link__2ea32,
        .side_aa8da2 .item_aa8da2:hover {
            margin-left: 10px;
        }
        .container__91a9d:hover,
        .channel__972a0:hover {
            margin-left: 18px;
        }
        /* list hover channel dot */
        .unread__2ea32 {
            border-radius: 50%;
            width: 8px;
            height: 8px;
            margin-left: -4px;
            transition: var(--list-item-transition);
            will-change: margin-left;
        }
        .wrapper__2ea32:hover .unread__2ea32 {
            margin-left: 4px;
        }
    }
}
